<template>
  <main class="c-topic" >
    <div v-if="media && !loading"> 
      <section class="c-topic_item ">
        <div :class="['c-topic_brand', 'D3media', { 'superLeague': superLeagueShow }]" :style="mediaBigPic">
          <img :src="media.picUrl" class= "toptic-media " >
        </div>
        <div class="c-topic__brand-mask"></div>
        <div class="mes-box" v-if="!superLeagueShow">
          <h3 class="mes-box_title">
            {{ media.title }} 
          </h3>
          <p class="c-topic_brand__labels" v-if="media.list">
            <span v-if="media.list.length-videoCount>0">{{ media.list.length-videoCount }}个视频</span>
            <span class="c-media_separator" v-if="media.list.length-videoCount>0 && videoCount>0">|</span>
            <span v-if="videoCount>0">{{ videoCount }}个子专题</span>
          </p>
          <p class="mes-box_mes " v-if="media.intro">
            {{ media.intro }}
          </p>
        </div>
      </section>
      <div :class="superLeagueShow ? 'super-league__list' : '' ">
        <section :class="['c-topic_item', 'gutter', { 'arrange': item.programType === 'arrange' }]" v-for="item in media.list" v-if="media.list">
          <div :class="['c-topic_brand', 'responsively-lazy', { 'dynamic': item.programType === 'dynamic' }]">
            <img :src="item.picUrl" :alt="item.picUrl" :srcset="blankPic" />
            <div v-if="item.programType === 'arrange'" class="arrange-item-wrap" @click="openSubpage(item.code, item.programType)">
              <h3 class="arrange-item-wrap__title">{{ item.title }}</h3>
              <p class="arrange-item-wrap__label">共 {{ item.childrenCount }} 个内容</p>
              <p class="arrange-item-wrap__intro js-mesbox_mes" ref="arrange-intros">{{ initDesc(item.introduction) }}</p>
            </div>
            <a v-else href="javascript:;" class="recommend-play_icon" @click="openSubpage(item.code, item.programType)"></a>
          </div>
          <div class="mes-box c-topic_box" v-if="item.programType !== 'arrange'">
            <h3 class="mes-box_title">{{ item.title || item.subtitle }}</h3>
            <p class="c-topic_labels" >
              <span v-text="item.duration">duration</span>
              <span class="c-media_separator">|</span>
              <span> {{ item.playCount }}人播放</span>
            </p>
          </div>
        </section>
        <global-footer :class="superLeagueShow ? 'super-league' : '' "></global-footer>      
      </div>
    </div>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer v-if="!media"></global-footer>
  </main>
</template>
<script>
  import setFalse from 'ployfill/';
  import topic from 'services/topic';
  import GlobalFooter from 'components/global-footer';
  import { sharewx } from 'services/sharewx';
  import holder from 'common/images/holderplace.jpg';
  import superLeagueCover from 'common/images/topic-top.jpg';

  export default {
    components: { GlobalFooter },
    data () {
      return {
        media: null,
        mediaBigPic: {
          backgroundImage: ''
        },
        loading: true,
        blankPic: holder,
        superLeagueShow: false,
        superLeagueCover
      };
    },
    created () {
      topic.get().then((data) => {
        this.loading = false;
        if (data) {
          this.media = data;
          this.mediaBigPic.backgroundImage = `url(${data.picUrl})`;
          this.relatedMedia = data.relatedList;
          if (data.code && data.code === 'zhongchao') {
            this.superLeagueShow = true;
            this.mediaBigPic.backgroundImage = `url(${superLeagueCover})`;
          }
          document.title = `VR全景 | ${this.media.title}`;
          document.head.querySelector('meta[name="description"]').content = this.media.intro;
          sharewx({
            title: this.media.title,
            imgUrl: this.media.picUrl,
            desc: this.media.intro
          });
        }
      }).catch(() => {
        this.loading = setFalse();
      });
    },
    computed: {
      videoCount () {
        return this.media.list.filter(item => {
          return item.programType === 'arrange';
        }).length;
      },
      byteSize () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        return (contentWidth * 33 / 1080);
      }
    },
    methods: {
      openSubpage (code, programType) {
        if (!code || !programType) {
          location.href = location.origin + location.pathname.replace(/\w+\.html$/, 'index.html') + `?code=${code}&containArrange=1`;
        } else if (programType === 'dynamic') {
          location.href = location.origin + location.pathname.replace(/\w+\.html$/, 'dynaprogram.html') + `?code=${code}`;
        } else if (programType === 'recorded') {
          location.href = location.origin + location.pathname.replace(/\w+\.html$/, 'viewthread.html') + `?code=${code}`;
        } else if (programType === 'moretv_tv' || programType === 'moretv_movie') {
          location.href = location.origin + location.pathname.replace(/\w+\.html$/, 'tv.html') + `?code=${code}`;
        } else {
          location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054';
        }
      },
      initDesc (intro) {
        let mesbox = this.getMesbox();
        mesbox = mesbox * 1;
        const byteLength = Math.floor((mesbox / this.byteSize) * 3);
        if (intro.length > byteLength) {
          intro = intro.slice(0, byteLength - 3).concat('...');
        }
        return intro;
      },
      getMesbox () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const mesbox = document.querySelector('.js-mesbox_mes');
        if (mesbox) {
          return mesbox.clientWidth;
        }
        return contentWidth * 0.7926;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~common/style/variables";

  .super-league__list {
    background: url('~common/images/topic-background.jpg') repeat-y left top;
    background-size: 100% auto;
    .c-topic_item.gutter {
      background: transparent;
    }
    .c-topic_box {
      background: transparent;
    }
    .mes-box_title {
      color: #fff;
    }
    .c-topic_labels {
      color: rgba(255, 255, 255, .7) !important;
    }
  }

  .c-topic_brand {
    background-color: rgba(31,72,6,1);   
    &.superLeague {
      padding-top: (689 / 810) * 100%;
    }
  }
  .arrange-item-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 0 .7rem 0;
    background: linear-gradient(rgba(#000, 0), rgba(#000, .9));
    &__title {
      flex: 1;
      flex-direction: column;
      display: inline-flex;
      justify-content: flex-end;
      font-size: .48rem;
      color: #fff;
      text-shadow: 0 .02rem .02rem rgba(#000, .5);
    }
    &__label {
      padding: .22rem 0 .3rem;
      font-size: .33rem;
      color: rgba(#fff, .8);
      text-shadow: 0 .02rem .02rem rgba(#000, .5);
    }
    &__intro {
      width: calc(100vw - 2.24rem);
      padding: 0 0 .35rem;
      min-height: 1.5rem;
      font-size: .33rem;
      color: rgba(#fff, .8);
      text-shadow: 0 .02rem .02rem rgba(#000, .5);
    }
  }
  .c-topic_item {
    &.arrange {
      padding-bottom: .6rem;
      .c-topic_brand {
        padding-bottom: 63.38%;
      }
    }
    &.gutter {
      @include base-backgroundcolor(100%, 1);
      padding-left: .42rem;
      padding-right: .42rem;
    }
    .mes-box_subtitle {
      padding-left: .3rem;
      font-size: .36rem;
      color: $font-color7;
      font-weight: 400;
    }
  }
  .mes-box_mes {
    padding-bottom: .6rem;
    color: $font-color7;
  }
  .c-topic_box {
    @include base-backgroundcolor(100%, 1);
    padding: 0 0 .6rem;
    .mes-box_title {
      margin: 0;
      padding: .24rem 0 .15rem;
      font-size: .42rem;
      font-weight: 600;
    }
    .c-topic_labels {
      font-size: .33rem;
      color: $font-color7;
    }
  }
  .c-topic_brand__labels {
    padding: .09rem 0 .4rem;
    font-size: .34rem;
    color: $font-color7;
  }
  .topic-play_icon {
    display: inline-block;
    position: absolute;
    right: .24rem;
    top: 5rem;
    z-index: 10;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('~common/images/play-normal.png');
    background-size: cover;
    &.hover,
    &.active {
      background-image: url('~common/images/play-hover.png')
    }
  }
  .c-topic__brand-mask {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: rgba(0, 0, 0, .2);
  }
  .c-media_separator {
    vertical-align: top;
  }
</style>
